import React, { Component } from 'react'
import {observer, inject} from 'mobx-react'

// 修饰器 的顺序不能调换，否则数据显示不出来
@inject('productsStore', 'cartStore')
@observer
class ProductsComp extends Component {
  componentDidMount () {
    const {productsStore} = this.props
    productsStore.getAllProducts()
  }

  render() {
    const {productsStore, cartStore} = this.props
    // console.log(this.props);
    // debugger
    return (
      <div>
        <div>{productsStore.foo}</div>
        <ul>
          {
            productsStore.all.map((item) => {
              return (
                <li key={item.id}>
                  {item.title} ---- {item.price} ---- {item.inventory}
                  {
                    item.inventory > 0 
                    ? (<button onClick={() => cartStore.addToCart(item)}>add to cart</button>)
                    : ''
                  }
                </li>
              )
            })
          }
        </ul>
      </div>
    )
  }
}
export default ProductsComp